<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  body {
    background: url("./img/1.jpg") no-repeat;
    background-size: cover;
    margin: 0;
    padding: 0;
  }

  .ThreeDFont {
    width: 100%;
    line-height: 300px;
    text-align: center;
    font-size: 80px;
  }

  .logo {
    width: 100%;
    height: 50px;
    background-color: #009a80;
  }

  .logo ul {
    width: 1000px;
    height: 50px;
    margin: 0 auto;
  }

  .logo ul li {
    height: 50px;
    list-style-type: none;
    float: left;
    color: #fff;
    font-size: 16px;
    font-family: '微软雅黑';
    line-height: 50px;
  }

  .logo ul li a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 0 30px;
  }

  .logo ul li a:hover {
    background: #ff6699;
  }

  .logo ul .first {
    position: relative;
    width: 300px;
    background: #ff6699;
    text-indent: 50px;
  }

  .logo ul .first .menu {
    position: absolute;
    width: 1200px;
    height: 600px;
    top: 50px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.1);
    display: none;
  }

  .menu h1 {
    color: black;
    line-height: 300px;
    text-align: center;
  }

</style>
<body>

  <div class="logo">
    <ul>
      <li class="first">展开二级菜单观看字体变幻效果
        <div class="menu">
          <div class="ThreeDFont">
          <span>小</span>
          <span>熊</span>
          <span>加</span>
          <span>油</span>
          <br />
          <span>K</span>
          <span>E</span>
          <span>E</span>
          <span>P</span>
          &nbsp;&nbsp;&nbsp;
          <span>R</span>
          <span>U</span>
          <span>N</span>
          <span>N</span>
          <span>I</span>
          <span>N</span>
          <span>G</span>
        </div>
        </div>
      </li>
      <li>
        <a href="#">首页</a>
      </li>
      <li>
        <a href="#">工具人</a>
      </li>
      <li>
        <a href="#">工具人</a>
      </li>
    </ul>
  </div>
</body>

<script>
  function changeColor(){

    var color="#a18cd1,#fad0c4,#ff9a9e,#fbc2eb,#a1c4fd,#a6c0fe,#4facfe,#fa709a,#30cfd0,#667eea,#9890e3";
    var size="80px,85px,90px,95px,100px,105px,110px";

    color=color.split(",");
    size=size.split(",");

    var spans = document.getElementsByTagName("span");

    for(var i=0;i<spans.length;i++){

      spans[i].style.color=color[parseInt(Math.random() * color.length)];
      spans[i].style.fontSize=size[parseInt(Math.random() * size.length)];
  }

  }
  setInterval("changeColor()",300);
</script>
<script src="js/jquery.js"></script>
<script>
  $(".logo ul .first").hover(function() {
    $(".menu").filter(':not(:animated)').slideToggle();
  }, function() {
    $(".menu").filter(':not(:animated)').slideToggle();
  })
</script>
</html>
